<template>
  <view class="stack" :style="stackStyle">
    <slot></slot>
  </view>
</template>

<script lang="ts" setup>
import { computed, provide } from 'vue'

type Alignment =
  | 'topLeft'
  | 'topCenter'
  | 'topRight'
  | 'centerLeft'
  | 'center'
  | 'centerRight'
  | 'bottomLeft'
  | 'bottomCenter'
  | 'bottomRight'
type Fit = 'loose' | 'expand'

interface Props {
  alignment?: Alignment
  fit?: Fit
}

const props = withDefaults(defineProps<Props>(), {
  alignment: 'topLeft',
  fit: 'loose',
})

const stackStyle = computed(() => ({
  position: 'relative',
  width: props.fit === 'expand' ? '100%' : 'auto',
  height: props.fit === 'expand' ? '100%' : 'auto',
}))

provide('stackAlignment', props.alignment)
</script>

<style scoped>
.stack {
  overflow: hidden;
}
</style>
